<script lang="ts" setup>
import {defineEmits, defineProps, ref} from 'vue';
import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';
import crypto from '@/util/crypto'
import axios from "axios";

const $toast = useToast();//消息提示栏
const props = defineProps({
  context: {
    type: String,
    value: ""
  },
  userInfo: {
    type: Object,
    value: ""
  },
  inputTime: {
    type: String,
    value: ""
  },
  perfumeCommentId: {
    type: Number,
    value: 1
  }
});
const userId = ref('')
if( localStorage.getItem("wiki-user-flag")){
  userId.value = crypto.decrypt(localStorage.getItem("wiki-user-flag"))
}
// 定义事件
const emit = defineEmits();
const removeComemnt = () => {
  axios.post("/api/perfume/comment/remove/"+props.perfumeCommentId,{},
      {
        headers:{
          token:localStorage.getItem("wiki-auth-token")
        }
      })
      .then(res=>{
        console.log(res)
        if(res.data.success){
          $toast.open({
            message:"删除成功",
            type:"success",
            position:"bottom-right"
          })
          emit('updateCommentRemove', true); // 向父组件发送更新信息
        }else{
          $toast.open({
            message:res.data.message,
            type:"error",
            position:'bottom-right'
          })
        }
      })
}
</script>

<template>
  <div class="comment-item">
    <div class="text-h6" style="display: flex;align-items: center;justify-content: space-between">
      <view>
        {{ userInfo.name }}({{ userInfo.sex == 1 ? '男士' : userInfo.sex == 2 ? '女士' : '其他' }}
      </view>
      <q-btn v-close-popup flat label="删除" @click="removeComemnt"/>
      </div>
    <div class="text-body1" v-html="context"></div>
    <div class="text-body2" style="text-align: right">{{inputTime}}</div>
  </div>
</template>

<style lang="scss" scoped>
.comment-item {
  margin: 20px;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 10px;
}
</style>